<script setup lang="ts">
import { Question } from '@/api/subject/type';
import { showToast } from 'vant';
import { ref } from 'vue';

const props = defineProps({
    disabled: {
        type: Boolean,
        default: false
    }
});

const question = ref({} as Question);
const judge = ref('true');
const emit = defineEmits(["submit"]);

const submit = () => {
    if (!question.value.title || !question.value.title.trim()) {
        showToast('题目描述不能为空');
        return;
    }
    
    question.value.type = 'Judge';
    question.value.answer = JSON.stringify({
        correctAnswer: judge.value
    });
    
    emit('submit', question.value);
}
</script>

<template>
    <div class="judge-question-form" :class="{ 'is-disabled': disabled }">
        <div class="form-section">
            <h3 class="section-title">题目内容</h3>
            
            <div class="question-content">
                <van-field
                    v-model="question.title"
                    placeholder="请输入题目描述"
                    type="textarea"
                    rows="4"
                    maxlength="1000"
                    show-word-limit
                    :disabled="disabled"
                    :rules="[{ required: true, message: '请填写题目描述' }]"
                />
            </div>
        </div>
        
        <div class="form-section">
            <h3 class="section-title">正确答案</h3>
            
            <div class="answer-selector">
                <van-radio-group v-model="judge" direction="horizontal" :disabled="disabled">
                    <div class="answer-option" :class="{ 'is-selected': judge === 'true' }">
                        <van-radio name="true">正确</van-radio>
                    </div>
                    <div class="answer-option" :class="{ 'is-selected': judge === 'false' }">
                        <van-radio name="false">错误</van-radio>
                    </div>
                </van-radio-group>
            </div>
            
            <div class="answer-preview">
                <div class="preview-box">
                    <div class="preview-title">答案预览</div>
                    <div class="preview-content">
                        当前选择的答案为: <strong>{{ judge === 'true' ? '正确' : '错误' }}</strong>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="form-actions">
            <van-button 
                type="primary" 
                block 
                round 
                @click="submit"
                :disabled="disabled"
                :loading="disabled"
                loading-text="提交中"
            >
                提交
            </van-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.judge-question-form {
    &.is-disabled {
        opacity: 0.8;
        pointer-events: none;
    }
    
    .form-section {
        margin-bottom: 24px;
        
        .section-title {
            font-size: 16px;
            font-weight: 500;
            color: #303133;
            margin: 0 0 16px 0;
        }
    }
    
    .answer-selector {
        margin-bottom: 24px;
        
        .van-radio-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            
            @media (max-width: 480px) {
                grid-template-columns: 1fr;
            }
        }
        
        .answer-option {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 80px;
            border: 1px solid #ebeef5;
            border-radius: 8px;
            transition: all 0.2s;
            
            &.is-selected {
                border-color: #4080ff;
                background-color: #ecf5ff;
            }
        }
    }
    
    .answer-preview {
        .preview-box {
            background-color: #f5f7fa;
            border-radius: 8px;
            padding: 16px;
            
            .preview-title {
                font-weight: 500;
                color: #303133;
                margin-bottom: 8px;
            }
            
            .preview-content {
                color: #606266;
                
                strong {
                    color: #4080ff;
                }
            }
        }
    }
    
    .form-actions {
        margin-top: 32px;
        
        .van-button {
            height: 44px;
            font-size: 16px;
        }
    }
}
</style>